<template>
	<view>

		<view class="index-content" v-show="isLogin == '1'">
			<Navbar :hideBtn="false" title="首页" :h5Show="false" bgColor="#2474fa" :titleStyle="titleStyle"
				:border="false" :onpageshow="true" :fixed="true" @handleAdd="handleAdd" :hasNewMessage="hasNewMessage">
			</Navbar>
			<view class="headerTitle">
				<view class="headerTitle_item">
					<view style="margin-top: 1.1vh;">
						<u-grid :border="false" col="3">
							<u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex"
								@click="navigateTo(listItem.url)">
								<u-image :src="listItem.imgUrl" width="45px" height="45px"></u-image>
								<text class="grid-text">{{ listItem.title }}</text>
							</u-grid-item>
						</u-grid>
					</view>

					<u-toast ref="uToast" />
					<view class="headerTitle_item_view" style="line-height: 2vh;">
						<u-notice-bar :text="text1" bgColor="#fff" style="margin-top: 0.5vh;"
							url="/pages/componentsB/tag/tag"></u-notice-bar>
					</view>
				</view>
			</view>

			<view class="index-block">
				<u-row justify="space-between" style="margin-bottom:32rpx;">
					<u-col span="3">
						<view class="demo-layout bg-purple-light demo-layout-frist">
							<view class="title_refix"> </view>数据总览
						</view>
					</u-col>
					<u-col span="1">
						<view class="demo-layout bg-purple-light" style="width: 68%;">
							<u-icon name="reload" size="21" @click="triggerRotate(1)"
								:class="{ 'rotate-once': rotateTrigger1 }"></u-icon>
						</view>
					</u-col>

					<u-col span="6">
						<!-- <view class="demo-layout bg-purple"></view> -->
					</u-col>
					<u-col span="2">
						<view class="demo-layout bg-purple-dark demo-layout-frist" @click="showOpen(1)">{{ tiemTitle1 }}
							<u-icon name="arrow-down" style="margin-left: 5px;"></u-icon>
						</view>
					</u-col>
				</u-row>
				<u-row gutter="15">
					<u-col span="6" v-for="(item, index) in sjzlList1" :key="index">
						<view class="item-tj" :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }">
							<u-row justify="space-between">
								<u-col span="8">
									<view>{{ item.name }}</view>
								</u-col>
								<u-col span="4">
									<!-- <view>{{ item.zb }} %</view> -->
								</u-col>
							</u-row>
							<view style="line-height: 6vh;">
								{{ item.num }}
							</view>
							<u-row>
								<u-col span="6">
									<view>{{ item.sl1 }}</view>
								</u-col>
								<u-col span="6">
									<view>{{ item.sl2 }}</view>
								</u-col>
							</u-row>

							<!-- 第二行：sl1num 和 sl2num -->
							<u-row style="margin-top: 24rpx;">
								<u-col span="6">
									<view>{{ item.sl1num }}</view>
								</u-col>
								<u-col span="6">
									<view>{{ item.sl2num }}</view>
								</u-col>
							</u-row>
						</view>

					</u-col>
				</u-row>
				<u-row gutter="15" style="margin-top: 1vh;">
					<u-col span="6" v-for="(item, index) in sjzlList2" :key="index">
						<view class="item-tj item-tj-frist" :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }">
							<u-row justify="space-between">
								<u-col span="8">
									<view>{{ item.name }}</view>
								</u-col>
								<u-col span="4">
									<!-- <view>{{ item.zb }} %</view> -->
								</u-col>
							</u-row>
							<view style="line-height: 6vh;">
								{{ item.num }}
							</view>
							<u-row>
								<u-col span="6">
									<view>{{ item.sl1 }}</view>
								</u-col>
								<u-col span="6">
									<view>{{ item.sl2 }}</view>
								</u-col>
							</u-row>

							<!-- 第二行：sl1num 和 sl2num -->
							<u-row style="margin-top: 24rpx;">
								<u-col span="6">
									<view>{{ item.sl1num }}</view>
								</u-col>
								<u-col span="6">
									<view>{{ item.sl2num }}</view>
								</u-col>
							</u-row>
						</view>

					</u-col>
				</u-row>
			</view>


			<view class="index-block">
				<u-row justify="space-between" style="margin-bottom:32rpx;">
					<u-col span="3">
						<view class="demo-layout bg-purple-light demo-layout-frist">
							<view class="title_refix"> </view>跟进情况
						</view>
					</u-col>
					<u-col span="1">
						<view class="demo-layout bg-purple-light" style="width: 68%;">
							<u-icon name="reload" size="21" @click="triggerRotate(2)"
								:class="{ 'rotate-once': rotateTrigger2 }"></u-icon>
						</view>
					</u-col>
					<u-col span="6">
						<!-- <view class="demo-layout bg-purple"></view> -->
					</u-col>
					<u-col span="2">
						<view class="demo-layout bg-purple-dark demo-layout-frist" @click="showOpen(2)">{{ tiemTitle2 }}
							<u-icon name="arrow-down" style="margin-left: 5px;"></u-icon>
						</view>
					</u-col>
				</u-row>

				<view style="background-color: #fff; width: 100%;border-radius: 8px;">
					<view class="charts-box" style="display: flex; flex-wrap: wrap; gap: 3px; padding: 24rpx;">
						<view v-for="(item, index) in optsArcbar" :key="index"
							style="width: 20%; height: 200rpx; text-align: center;">

							<view style="height: 140rpx;">
								<qiun-data-charts type="arcbar" :opts="item" :key="index"
									:chartData="chartArcbarData[index]" />
							</view>
							<text style="font-size: 24rpx; margin-top: -10rpx; color: #333;">{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>


			<view class="index-block">
				<u-row justify="space-between" style="margin-bottom:32rpx;">
					<u-col span="3">
						<view class="demo-layout bg-purple-light demo-layout-frist">
							<view class="title_refix"> </view>星级统计
						</view>
					</u-col>
					<u-col span="1">
						<view class="demo-layout bg-purple-light" style="width: 68%;">
							<u-icon name="reload" size="21" @click="triggerRotate(3)"
								:class="{ 'rotate-once': rotateTrigger3 }"></u-icon>
						</view>
					</u-col>

					<u-col span="6">
						<!-- <view class="demo-layout bg-purple"></view> -->
					</u-col>
					<u-col span="2">
						<view class="demo-layout bg-purple-dark demo-layout-frist" @click="showOpen(3)">{{ tiemTitle3 }}
							<u-icon name="arrow-down" style="margin-left: 5px;"></u-icon>
						</view>
					</u-col>
				</u-row>

				<view style="background-color: #fff; width:  100%; height: 100%; border-radius: 8px;">
					<view class="charts-box">
						<qiun-data-charts type="pie" :opts="optsPie" :chartData="chartPieData" />
					</view>
				</view>
			</view>




			<view class="index-block">
				<u-row justify="space-between" style="margin-bottom:32rpx;">
					<u-col span="3">
						<view class="demo-layout bg-purple-light demo-layout-frist">
							<view class="title_refix"> </view>排名
						</view>
					</u-col>
					<u-col span="1">
						<view class="demo-layout bg-purple-light" style="width: 68%;">
							<u-icon name="reload" size="21" @click="triggerRotate(4)"
								:class="{ 'rotate-once': rotateTrigger4 }"></u-icon>
						</view>
					</u-col>
					<u-col span="6">
						<!-- <view class="demo-layout bg-purple"></view> -->
					</u-col>
					<u-col span="2">
						<view class="demo-layout bg-purple-dark demo-layout-frist" @click="showOpen(4)">{{ tiemTitle4 }}
							<u-icon name="arrow-down" style="margin-left: 5px;"></u-icon>
						</view>
					</u-col>
				</u-row>
				<view style="background-color: #fff; width: 100%;border-radius: 8px;">
					<u-tabs :list="tabsList" @click="clickTabs" item-width="200"
						itemStyle="padding:10px 0  " :scrollable="false"></u-tabs>
					<!-- <u-tabs :list="tabsList" @click="clickTabs" :scrollable="false" lineWidth="30"></u-tabs> -->
					<view style="padding: 20px;">
						<view class="tab-content" v-for="(item, index) in pmList">
							<u-row justify="space-between" gutter="10">
								<u-col span="2">
									<view :style="{ backgroundImage: 'url(' + item.url + ')' }"
										style="width: 45px; height: 45px; background-size: cover; background-repeat: no-repeat; background-position: center;">
										<text v-if="index >= 3" class="u-text-center">{{ index + 1 }}</text>
									</view>
								</u-col>
								<u-col span="7">
									<view>{{ item.name }}</view>
								</u-col>
								<u-col span="3">
									<view>{{ item.value }}</view>
								</u-col>
							</u-row>
						</view>
						<u-empty v-if="pmList.length == 0" mode="data" text="暂无数据"></u-empty>
					</view>
				</view>
			</view>

			<u-popup :show="showTime1" @close="close(1)" @open="open" mode="right" closeable>
				<view style="padding: 20px;">筛选条件</view>
				<view style="padding: 20px;">
					<u-form labelPosition="left" :model="model1" ref="uForm" labelWidth="80">
						<u-form-item label="日期类型" prop="name" ref="item1">
							<u-grid :col="2">
								<!-- 每行显示 3 条 -->
								<u-grid-item v-for="(item, index) in timeTypeList" :key="index">
									<view class="grid-item-content" @click="selectTimeType1(item.value)"
										:class="{ 'active': interval1 == item.value }">
										{{ item.name }}
									</view>
								</u-grid-item>
							</u-grid>
						</u-form-item>
					</u-form>
				</view>
			</u-popup>
			<u-popup :show="showTime2" @close="close(2)" @open="open" mode="right" closeable>
				<view style="padding: 20px;">筛选条件</view>
				<view style="padding: 20px;">
					<u-form labelPosition="left" :model="model1" ref="uForm" labelWidth="80">
						<u-form-item label="日期类型" prop="name" ref="item1">
							<u-grid :col="2">
								<!-- 每行显示 3 条 -->
								<u-grid-item v-for="(item, index) in timeTypeList" :key="index">
									<view class="grid-item-content" @click="selectTimeType2(item.value)"
										:class="{ 'active': interval2 == item.value }">
										{{ item.name }}
									</view>
								</u-grid-item>
							</u-grid>
						</u-form-item>
					</u-form>
				</view>
			</u-popup>
			<u-popup :show="showTime3" @close="close(3)" @open="open" mode="right" closeable>
				<view style="padding: 20px;">筛选条件</view>
				<view style="padding: 20px;">
					<u-form labelPosition="left" :model="model1" ref="uForm" labelWidth="80">
						<u-form-item label="日期类型" prop="name" ref="item1">
							<u-grid :col="2">
								<!-- 每行显示 3 条 -->
								<u-grid-item v-for="(item, index) in timeTypeList" :key="index">
									<view class="grid-item-content" @click="selectTimeType3(item.value)"
										:class="{ 'active': interval3 == item.value }">
										{{ item.name }}
									</view>
								</u-grid-item>
							</u-grid>
						</u-form-item>
					</u-form>
				</view>
			</u-popup>
			<u-popup :show="showTime4" @close="close(4)" @open="open" mode="right" closeable>
				<view style="padding: 20px;">筛选条件</view>
				<view style="padding: 20px;">
					<u-form labelPosition="left" :model="model1" ref="uForm" labelWidth="80">
						<u-form-item label="日期类型" prop="name" ref="item1">
							<u-grid :col="2">
								<!-- 每行显示 3 条 -->
								<u-grid-item v-for="(item, index) in timeTypeList" :key="index">
									<view class="grid-item-content" @click="selectTimeType4(item.value)"
										:class="{ 'active': interval4 == item.value }">
										{{ item.name }}
									</view>
								</u-grid-item>
							</u-grid>
						</u-form-item>
					</u-form>
				</view>
			</u-popup>

			<view class="wrap">
				<!-- <text>滑动页面，返回顶部按钮将出现在右下角</text> -->
				<u-back-top :scrollTop="scrollTop" :mode="mode" :iconStyle="iconStyle"></u-back-top>
			</view>
		</view>
		<view class="home" v-show="isLogin == '2'">
			<u-toast ref="uToast" />
			<view class="herder">
				<view class="herderTiter">

					<view class="herderImgC">
						<view class="title">
							<view style="font-size: 1.3rem;">房千千</view>
							<view style="font-size: 1rem; margin-left: 1vh; color: #ffffffb8;">有房即可申请</view>
						</view>

						<image src="@/static/fqq-img/bg2.png" mode="aspectFill"></image>
						<view class="fild-body">
							<view style="margin-top: 1.7rem; padding-top: .7rem;">最高可借额度(元)</view>
							<view style="margin: 0.5rem;font-size: 3rem; font-weight: 600;">1,000,000</view>
							<view class="submit">
								<view class="step">
									<view class="step-title-box alltop">
										<view class="step-title">
											<image class="step-title-img" src="@/static/fqq-img/4.jpg"
												mode="aspectFill">
											</image>
											<!-- <view class="step-title-img" style="background-image: url(@/static/fqq-img/4.jpg);"> -->
											<!-- </view> -->
											<view class="step-title-text">申请流程</view>
											<image class="step-title-img" src="@/static/fqq-img/5.png"
												mode="aspectFill">
											</image>

										</view>
									</view>
									<view class="step-box">
										<view class="step-item">

											<image class="arrowhead" src="@/static/fqq-img/6.png" mode="aspectFill">
											</image>
											<!-- <view class="arrowhead" style="background-image: url(@/static/fqq-img/6.png);"> -->
											<!-- </view>                      -->
											<view class="item-title">第一步</view>
											<view class="item-txt">点击申请</view>
										</view>
										<view class="step-item">
											<image class="arrowhead" style="height: 3vh;" src="@/static/fqq-img/7.png"
												mode="aspectFill"></image>
											<!-- 	<view class="arrowhead" style="background-image: url(@/static/fqq-img/7.png);">
										</view> -->
										</view>
										<view class="step-item">
											<image class="arrowhead" src="@/static/fqq-img/8.png" mode="aspectFill">
											</image>
											<view class="item-title">第二步</view>
											<view class="item-txt">匹配.审批</view>
										</view>
										<view class="step-item">
											<image class="arrowhead" src="@/static/fqq-img/9.png" style="height: 3vh;"
												mode="aspectFill"></image>
											<!-- 	<view class="arrowhead" style="background-image: url(@/static/fqq-img/9.png);">
										</view> -->
										</view>
										<view class="step-item">
											<image class="arrowhead" src="@/static/fqq-img/10.png" mode="aspectFill">
											</image>
											<!-- <view class="arrowhead" style="background-image: url(@/static/fqq-img/10.png);">

										</view> -->
											<view class="item-title">第三步</view>
											<view class="item-txt">过审.放款</view>
										</view>
									</view>
								</view>
							</view>

						</view>
						<view style="margin-top: 80px;">
							<button class="subimt-but" @click="submitEvent()">立即申请</button>
						</view>
						<view class="step-bottom">

							<view class="step-bottom-box">
								<view class="step-bottom-title">
									<image style="height: 8px; width: 4.6rem;" src="@/static/fqq-img/4.jpg"
										mode="aspectFill"></image>
									<view class="step-title-text">选择我们的四大理由</view>
									<image style="height: 8px; width: 4.6rem;" src="@/static/fqq-img/5.png"
										mode="aspectFill"></image>
								</view>
							</view>
							<view class="account-box">
								<view class="account">
									<image class="account-img" src="@/static/fqq-img/icon5.png" mode="aspectFill">
									</image>
									<view class="item-title">智能提额</view>
									<view class="item-txt">提交个人资料发起提额</view>
								</view>
								<view class="account">
									<image class="account-img" src="@/static/fqq-img/icon6.png" mode="aspectFill">
									</image>
									<view class="item-title">安全保障</view>
									<view class="item-txt">个人信息多重加密</view>
								</view>
								<view class="account">
									<image class="account-img" src="@/static/fqq-img/icon7.png" mode="aspectFill">
									</image>
									<view class="item-title">期限灵活</view>
									<view class="item-txt">支持1-36期，视情况自选</view>
								</view>
								<view class="account">
									<image class="account-img" src="@/static/fqq-img/icon8.png" mode="aspectFill">
									</image>
									<view class="item-title">放心贷</view>
									<view class="item-txt">服务更放心</view>
								</view>
							</view>
						</view>
						<view style="height: 33vh; margin-top: 3vh; text-align: center;">
							<view>实际服务方：房千千房地产评估(湖北)有限公司</view>
							<view>本交易由房千千房地产评估(湖北)有限公司提供担保服务 </view>
							<view style="margin-top: 1vh; color: #616161;">
								贷款有风险、借款需谨慎<br />
								贷款额度、放款时间以实际审批结果为准<br />
								年化综合息费率(单利)3.85%-24%(以资金方审批结果为准)<br />
								公积金相关资料仅作为贷款服务验资证明<br />
								放贷路径与公积金账户无关<br />
								请根据个人能力合理贷款、理性消费、避免逾期<br />
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="u-demo-block__content" style="margin:10upx 20upx 20upx; background-color: #fefbec;">
			</view>
		</view>


	</view>
</template>

<script>
import Navbar from '@/components/navbar/Navbar'
import { getPreviewList, getCountFollowStatus, getCountStar, getRankingList, getNoticeContent, getUserMessage, verification } from '@/api/api'

import moment from 'moment'
let _now = new Date();
let now_time = {};
now_time.year = _now.getFullYear()
now_time.month = _now.getMonth() + 1
now_time.day = _now.getDay()

export default {
	components: {
		Navbar,
	},
	data() {
		return {
			scrollTop: 0,
			mode: 'square',
			iconStyle: {
				fontSize: '32rpx',
				color: '#2979ff'
			},
			isCanvas2d: true,
			delayload: false,
			titleStyle: {
				color: '#fff'
			},
			list: [{
				imgUrl: require("@/static/img/index-img/kh.png"),
				title: '我的客户',
				url: '/pages/crm/customer'
			},
			{
				imgUrl: require("@/static/img/index-img/gh.png"),
				title: '公海池',
				url: '/pages/crm/publicList'
			},
			{
				imgUrl: require("@/static/img/index-img/gj.png"),
				title: '重要客户',
				url: '/pages/crm/importantList'
			},
			{
				imgUrl: require("@/static/img/index-img/sm.png"),
				title: '上门中心',
				url: '/pages/crm/pagsForMobile'
			},
			{
				imgUrl: require("@/static/img/index-img/cj.png"),
				title: '成交客户',
				url: '/pages/crm/paymentList'
			},
			{
				imgUrl: require("@/static/img/index-img/db.png"),
				title: '待办日程',
				url: '/pages/work/schedule/list'
			},
			],
			text1: '',
			rotateTrigger1: false,
			rotateTrigger2: false,
			rotateTrigger3: false,
			rotateTrigger4: false,
			tiemTitle1: '本日',
			tiemTitle2: '本日',
			tiemTitle3: '本日',
			tiemTitle4: '本日',

			showTime: false,
			model1: {
				interval: 0
			},
			timeTypeList: [{
				name: '本日',
				value: 0,
			},
			{
				name: '昨日',
				value: 1,
			},
			{
				name: '本周',
				value: 2,
			},
			{
				name: '上周',
				value: 3,
			},
				// {
				// 	name: '本月',
				// 	value: 4,
				// },
				// {
				// 	name: '上月',
				// 	value: 5,
				// },
			],
			sjzlList1: [{
				name: '回款金额/元',
				// zb: 100,
				num: 0,
				sl1: '费用笔数',
				sl2: '回款单数',
				sl1num: 0,
				sl2num: 0,
				imgUrl: require("@/static/img/index-img/1.png")
			},
			{
				name: '放款金额/万元',
				// zj: 0,
				num: 0,
				sl1: '已签单数',
				sl2: '已做单数',
				sl1num: 0,
				sl2num: 0,
				imgUrl: require("@/static/img/index-img/2.png")
			},

			],
			sjzlList2: [{
				name: '已上门数',
				// zj: 0,
				num: 0,
				sl1: '跟进客户数',
				sl2: '邀约客户数',
				sl1num: 0,
				sl2num: 0,
				imgUrl: require("@/static/img/index-img/3.png")
			},
			{
				name: '通话时长/分',
				// zj: 0,
				num: 0,
				sl1: '客户接听数',
				sl2: '客户拨打数',
				sl1num: 0,
				sl2num: 0,
				imgUrl: require("@/static/img/index-img/4.png")
			},
			],
			chartRingData: {},
			optsPie: {},
			chartPieData: {},
			optsArcbar: [],
			chartArcbarData: [],
			tabsList: [{
				name: '放款',
				value: '1'
			}, {
				name: '回款',
				value: '2'
			}, {
				name: '上门',
				value: '3'
			}, {
				name: '通话时长',
				value: '4'
			}],

			pmList: [],

			arcbarList: {},
			pieList: {},
			interval1: 0,
			interval2: 0,
			interval3: 0,
			interval4: 0,
			typeTimeNum: null,
			showTime1: false,
			showTime2: false,
			showTime3: false,
			showTime4: false,
			rankingType: '1',
			hasNewMessage: false,
			isLogin: '',
			system: ''

		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReady() {
		// this.getServerDataRing();
		if (this.isLogin == '1') {
			this.getServerDataPie();
			this.getServerDataArcbar();
		}

	},

	onLoad() {
		// if (this.isLogin == '1') {
		// 	const unreadCount = getUserMessage(); // 接口获取未读数
		// 	if (unreadCount > 0) {
		// 		uni.setTabBarBadge({
		// 			index: 1,
		// 			text: String(unreadCount)
		// 		});
		// 	} else {
		// 		uni.hideTabBarRedDot({ index: 1 });
		// 	}
		// } else {
		this.system = uni.getSystemInfoSync();
		this.verification()
		// }

	},

	created() {
		// this.verification()

	},

	computed: {
		tabItemWidth() {
			return 100 / this.tabsList.length + '%';
		}
	},
	methods: {

		submitEvent() {
			// 获取缓存信息
			const phone = uni.getStorageSync('phone')
			if (phone == '') {
				uni.$u.toast('请先登录')
				uni.navigateTo({
					url: '/pages/login/index'
				})
			} else {
				uni.navigateTo({
					url: '/pages/form/fqq-form'
				})
			}

		},

		verification() {
			verification({
				deviceBrand: this.system.deviceBrand ? this.system.deviceBrand : this.system.model,
			}).then(res => {
				if (res.code == 200) {
					// this.isLogin = res.data.status
					this.isLogin = 2
					if (this.isLogin == '1') {
						this.getArcbarList();
						this.getPieList()
						this.getPreview()
						this.getRankingList()
						this.getNoticeContent()
					}
				}
			})
		},


		// // 控制bell闪烁
		// triggerBellFlash() {
		// 	getUserMessage().then(res => {
		// 		if (res.code == 200) {
		// 			if (res.count != null) {
		// 				this.hasNewMessage = true;
		// 			}
		// 		}
		// 	})
		// },

		getNoticeContent() {
			getNoticeContent().then(res => {
				if (res.code == 200) {
					this.text1 = res.data
				}

			})
		},

		// 排名列表
		getRankingList() {
			getRankingList({ interval: this.interval4, type: this.rankingType }).then(res => {
				res.data.forEach((item, index) => {
					if (index == 0) {
						item.url = require('@/static/img/index-img/one.png');
					} else if (index == 1) {
						item.url = require('@/static/img/index-img/two.png');
					} else if (index == 2) {
						item.url = require('@/static/img/index-img/three.png');
					} else {
						item.url = require('@/static/img/index-img/four.png');
					}
				});
				this.pmList = res.data;

			})

		},

		getPreview() {
			// 调用接口
			getPreviewList({ interval: this.interval1, type: 1 }).then(res => {
				this.sjzlList1.map((item, index) => {
					if (index == 0) {
						// 回款
						item.num = res.data.collect.positionOne
						item.sl1num = res.data.collect.positionTwo
						item.sl2num = res.data.collect.positionThree
					} else {
						// 放款
						item.num = res.data.loan.positionOne
						item.sl1num = res.data.loan.positionTwo
						item.sl2num = res.data.loan.positionThree
					}
				})
			})
			getPreviewList({ interval: this.interval1, type: 3 }).then(res => {
				this.sjzlList2.map((item, index) => {
					if (index == 0) {
						// 上门
						item.num = res.data.registrationInfo.positionOne
						item.sl1num = res.data.registrationInfo.positionTwo
						item.sl2num = res.data.registrationInfo.positionThree
					}

				})


			})
			getPreviewList({ interval: this.interval1, type: 4 }).then(res => {

				this.sjzlList2.map((item, index) => {
					if (index == 1) {
						// 通话
						item.num = res.data.phoneCall.positionOne
						item.sl1num = res.data.phoneCall.positionTwo
						item.sl2num = res.data.phoneCall.positionThree
					}

				})


			})

		},



		getPieList() {
			getCountStar({ interval: this.interval3 }).then(res => {
				this.pieList = res;

				const color = ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"];

				this.optsPie = {
					color: color,
					padding: [10, 50, 10, 10],
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 30,
						format: (name, value) => `${name}: ${value}`
					},
					subtitle: {
						name: res.data[0]?.name || '',
						fontSize: 11,
						color: "#666666"
					},
					extra: {
						pie: {
							label: true,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							formatter: (params) => {
								return params.name + '\n' + params.value;
							}
						}
					}
				};

				this.getServerDataPie();
				this.pieChartKey += 1; // 强制刷新组件
			});
		},

		clickTabs(item) {
			this.rankingType = item.value
			// console.log('item', rankingType);
			this.getRankingList()
		},
		getArcbarList() {
			getCountFollowStatus({ interval: this.interval2 }).then(res => {
				this.arcbarList = res;

				const color = ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4"];

				this.optsArcbar = res.data.map((item, index) => {
					return {
						color: [color[index % color.length]],
						padding: [1, 1, 1, 1],
						title: {
							name: item.value == 0 ? "0" : item.value,
							fontSize: 15,
							color: "#2fc25b"
						},
						subtitle: {
							name: "",
							fontSize: 11,
							color: "#666666"
						},
						name: item.name,
						extra: {
							arcbar: {
								type: "circle",
								width: 5,
								backgroundColor: "#E9E9E9",
								startAngle: 1.5,
								endAngle: 0.25,
								gap: 1
							}
						}
					};
				});

				// 强制更新 chartArcbarData
				this.getServerDataArcbar();
			});
		},
		getServerDataArcbar() {
			this.chartArcbarData = {}
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				// 假设这是从服务器返回的数据
				let color = ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4"];

				// 构建 chartArcbarData
				this.chartArcbarData = this.arcbarList.data.map((item, index) => {
					return {
						series: [{
							name: item.name,
							data: item.value / 100, // 假设数据需要转换为百分比形式
							color: color[index % color.length] // 防止索引越界
						}]
					};
				});
			}, 500);
		},

		// 添加数据
		handleAdd() {
			uni.navigateTo({
				url: '/pages/form/customerAddOrEditForm'
			})


		},
		// getServerDataRing() {
		// 	//模拟从服务器获取数据时的延时
		// 	setTimeout(() => {
		// 		//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		// 		let res = {
		// 			series: [{
		// 				data: [{
		// 					"name": "已跟进",
		// 					"value": 50,
		// 					labelShow: false
		// 				}, {
		// 					"name": "未跟进",
		// 					"value": 30,
		// 					labelShow: false
		// 				},]
		// 			}]
		// 		};
		// 		this.chartRingData = JSON.parse(JSON.stringify(res));
		// 	}, 500);
		// },
		getServerDataPie() {
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					series: [{
						data: this.pieList.data
					}]
				};
				this.chartPieData = JSON.parse(JSON.stringify(res));
			}, 500);
		},

		triggerRotate(type) {
			const rotateKey = `rotateTrigger${type}`;
			this[rotateKey] = true;
			// 动画结束后重置状态，以便下次再次触发
			setTimeout(() => {
				this[rotateKey] = false;
			}, 1000); // 与动画持续时间一致

			if (type == 1) {
				this.getPreview()
			} else if (type == 2) {
				this.getArcbarList()
			} else if (type == 3) {
				this.getPieList()
			} else if (type == 4) {
				this.getRankingList()
			}

		},
		showOpen(type) {
			const rotateKey = `showTime${type}`;
			this[rotateKey] = true
			this.typeTimeNum = type
		},
		close(type) {
			const rotateKey = `showTime${type}`;
			this[rotateKey] = false
		},
		open() {
			this.showTime = true
		},
		selectTimeType1(value) {
			this.interval1 = value;
			// timeTypeList循环拿到name并且给tiemTitle
			this.tiemTitle1 = this.timeTypeList.find(item => item.value == value).name;
			this.showTime1 = false
			this.getPreview()

		},
		selectTimeType2(value) {
			this.interval2 = value;
			// timeTypeList循环拿到name并且给tiemTitle
			this.tiemTitle2 = this.timeTypeList.find(item => item.value == value).name;
			this.showTime2 = false
			this.getArcbarList()
		},
		selectTimeType3(value) {
			this.interval3 = value;
			// timeTypeList循环拿到name并且给tiemTitle
			this.tiemTitle3 = this.timeTypeList.find(item => item.value == value).name;
			this.showTime3 = false
			this.getPieList()
		},
		selectTimeType4(value) {
			this.interval4 = value;
			// timeTypeList循环拿到name并且给tiemTitle
			this.tiemTitle4 = this.timeTypeList.find(item => item.value == value).name;
			this.showTime4 = false
			this.getRankingList()
		},
		navigateTo(url) {
			uni.navigateTo({
				url: url
			})
		},
	},

}
</script>

<style lang="scss">
.grid-item-content {
	width: 80%;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #333;
	background-color: #e2e1e1;
	margin: 10rpx 0;
	border-radius: 8rpx;

	&.active {
		background-color: #2474fa;
		font-weight: bold;
		color: #fff;
	}
}

.index-content {
	background-color: #f3f4f6;
	// min-height: 100vh;

	.headerTitle {
		height: 16rem;
		width: 100%;

		// background-color: #fff;
		.headerTitle_item {
			height: 90%;
			width: 100%;
			color: #fff;
			border-bottom-right-radius: 4%;
			border-bottom-left-radius: 4%;
			background-color: #2474fa;
			border-top: 1px solid;

			.headerTitle_item_view {
				margin-top: 2vh;
				width: 95%;
				height: 5.5vh;
				background-color: #fff;
				border: 0.8px solid rgb(210, 209, 209);
				margin: 18px auto 0px;
				text-align: center;
				border-radius: 7px;
				color: rgb(22, 22, 22);
				line-height: 7vh;

				.headerTitle_item_view_row {
					line-height: 7vh;
					padding-left: 10vw;
				}
			}
		}
	}

	.demo-layout-frist {
		display: flex;

		.title_refix {
			width: 6px;
			height: 22px;
			background: #2474fa;
			margin-right: 4px;
		}
	}

}

.index-block {
	padding: 40rpx;
	// background-color: #fff;
}

.index-block-title {
	// font-size: 30rpx;
	// font-weight: bold;
	padding: 0 0 40rpx 0;
}

.item-tj {
	/* width: 96%; */
	/* height: 135px; */
	border-radius: 8px;
	color: #fff;
	font-size: 12px;
	padding: 9px;
	background-size: 100% 100%;


	&-frist {
		background-color: rgba($color: #2979ff, $alpha: 0.8);
		// background-image: url('/static/img/bg/qb.png');
	}

	.item-tj-line {
		display: flex;
		justify-content: space-between;

	}
}

.detail_list {
	// height: 700rpx;
	overflow: auto;
	color: #9E9E9E;

	.detail_item {
		display: flex;
		margin: 20rpx 0;
		align-items: center;

		.icon {
			width: 30%;
			text-align: center;

			li {
				font-size: 80rpx;
			}
		}

		.right_content {
			width: 50%;
			text-align: center;
		}

		.icon-income {
			color: #4AABF9;
		}

		.icon-expend {
			color: #E45521;
		}

		.money {
			color: #000;
		}
	}
}

.demo-layout {
	height: 25px;
	border-radius: 4px;
}

// 修复 u-grid-item 默认布局
::v-deep .u-grid-item {
	display: flex;
	flex-direction: column;
	align-items: center; // 水平居中
	justify-content: center; // 垂直居中
	text-align: center; // 文字居中
	margin-top: 2vh;
}

.grid-text {
	font-size: 28rpx;
	color: #fff;
	margin-top: 14rpx;
}

::v-deep.u-col-6 {
	padding-left: 4px !important;
	padding-right: 4px !important;
}

@keyframes spin-once {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.rotate-once {
	animation: spin-once 1s linear forwards;
}

.charts-box {
	display: flex;
	justify-content: space-between;
	/* 水平分布 */
	align-items: center;
	/* 垂直居中 */
	// padding: 20rpx;
	background-color: #fff;
	border-radius: 8px;
}

.wrap {
	// height: 200vh;
}

.tab-content {
	height: 8vh;
	line-height: 8vh;
	text-align: center;
	// width: 100%;

	// border: 1px  solid red;
}

.u-text-center {
	position: relative;
	top: -25%;
	left: 37%;
	transform: translate(-50%, -50%);
	color: rgb(255, 255, 255);
	font-size: 20px;
	/* background-color: rgba(0, 0, 0, 0.5); */
	border-radius: 50%;
	width: 24px;
	height: 24px;
	text-align: center;
}



.u-demo-block__content {
	.u-row {
		.u-col:nth-child(1) {
			border-right: 2upx solid white;
			border-bottom: 2upx solid white;
		}

		.u-col:nth-child(2) {
			border-left: 2upx solid white;
			border-bottom: 2upx solid white;
		}

		.u-col:nth-child(3) {
			border-right: 2upx solid white;
			border-top: 2upx solid white;
		}

		.u-col:nth-child(4) {
			border-left: 2upx solid white;
			border-top: 2upx solid white;
		}

		.u-col:nth-child(5) {
			border-right: 4upx solid white;
			border-top: 4upx solid white;
		}

		.bg-purple-light {
			height: 180upx;
			margin: 0;
			padding: 0;
		}

		.item {
			display: flex;
			padding: 20rpx;
		}

		image {
			width: 120rpx;
			flex: 0 0 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			border-radius: 12rpx;
		}

		.title {
			text-align: left;
			font-size: 28rpx;
			color: $u-content-color;
			margin-top: 20rpx;
		}

	}
}

.wrap {
	padding: 12px;
}

.demo-layout {
	height: 25px;
	border-radius: 4px;
}

.bg-purple {
	background: #CED7E1;
}

.bg-purple-light {
	// background: #e5e9f2;
}

// .bg-purple-dark {
// 	background: #99a9bf;
// }

span {
	left: 30rpx;

	text-align: center;
	line-height: 40rpx;
	color: #FFFFFF;
	font-size: 20rpx;
	background-color: red;
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	position: absolute;
}

.refuse {
	width: 563rpx;
	height: 396rpx;

	image {
		width: 152rpx;
		height: 152rpx;
		border-radius: 50%;
		margin-top: 80rpx;
	}

	text {
		margin-top: 35rpx;
		font-size: 32rpx;
		color: #333333;
	}
}

button {
	margin-top: 35rpx;
	width: 192rpx;
	height: 59rpx;
	background-color: #419dff;
	border-radius: 10rpx;
	color: #FFFFFF;
	font-size: 30rpx;
	line-height: 59rpx;

}

.shpass {
	width: 563rpx;
	padding-bottom: 30rpx;
	// height: 477rpx;
	background-color: #ffffff;
	border-radius: 10rpx;

	.tex1 {
		font-size: 32rpx;
		color: #333333;
	}

	.tex2 {
		display: block;
		width: 250rpx;
		margin-left: 60rpx;
		font-size: 32rpx;
		color: #9e9e9e;
	}
}

.cent {
	position: absolute;
	top: 40rpx;
	left: 40rpx;

	image {
		width: 30rpx;
		height: 80rpx;
	}

	text {
		color: #FFFFFF;
	}
}

.circleProgress_wrapper {
	width: 200rpx;
	height: 200rpx;
	margin: auto;

	position: relative;

}

.wrapper {
	width: 100rpx;
	height: 200rpx;
	position: absolute;
	top: 0;
	overflow: hidden;
}

.right {
	right: 0;
}

.left {
	left: 0;
}

.circleProgress {
	width: 160rpx;
	height: 160rpx;
	border: 20rpx solid #7cd1ff;
	border-radius: 50%;
	position: absolute;
	top: 0;
	-webkit-transform: rotate(45deg);
}

.rightcircle {
	border-top: 20rpx solid #7cd1ff;
	border-right: 20rpx solid #7cd1ff;
	right: 0;
	-webkit-animation: circleProgressLoad_right 5s linear infinite;
}

.leftcircle {
	border-bottom: 20rpx solid #7cd1ff;
	border-left: 20rpx solid #7cd1ff;
	left: 0;
	-webkit-animation: circleProgressLoad_left 5s linear infinite;
}

@-webkit-keyframes circleProgressLoad_right {
	0% {
		border-top: 20rpx solid #FFFFFF;
		border-right: 20rpx solid #7cd1ff;
		-webkit-transform: rotate(45deg);
	}

	50% {
		border-top: 20rpx solid #a0c7f6;
		border-right: 20rpx solid #a0c7f6;
		border-left: 20rpx solid #a0c7f6;
		border-bottom: 20rpx solid #a0c7f6;
		-webkit-transform: rotate(225deg);
	}

	100% {
		border-left: 20rpx solid #a0c7f6;
		border-bottom: 20rpx solid #a0c7f6;
		-webkit-transform: rotate(225deg);
	}
}

@-webkit-keyframes circleProgressLoad_left {
	0% {
		border-bottom: 20rpx solid #7cd1ff;
		border-left: 20rpx solid #7cd1ff;
		-webkit-transform: rotate(45deg);
	}

	50% {
		border-bottom: 20rpx solid #FFFFFF;
		border-left: 20rpx solid #a0c7f6;
		border-top: 20rpx solid #a0c7f6;
		border-right: 20rpx solid #a0c7f6;
		-webkit-transform: rotate(45deg);
	}

	100% {
		border-top: 20rpx solid #a0c7f6;
		border-right: 20rpx solid #a0c7f6;
		border-bottom: 20rpx solid #a0c7f6;
		border-left: 20rpx solid #a0c7f6;
		-webkit-transform: rotate(225deg);
	}
}

.box {
	margin-left: 113rpx;
	margin-top: 20rpx;
	width: 172rpx;
	height: 137rpx;
	background-image: linear-gradient(#dbecff,
			#dbecff),
		linear-gradient(#faedc6,
			#faedc6);
	box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(52, 51, 51, 0.22);
	border-radius: 10rpx;

	image {
		width: 100rpx;
		height: 100rpx;
	}

	text {

		color: #fcae19;
		font-size: 28rpx;
	}
}

.information {
	position: relative;
	position: fixed;
	right: 45rpx;
	top: 64rpx;

	image {
		width: 50rpx;
		height: 50rpx;
	}
}

.herder {
	width: 100%;
	// height: 620rpx;

	.herderTiter {
		// background-color: blue;
		color: #000;
		height: 24vh;

		.city {
			font-size: 28rpx;
			padding-top: 62rpx;
			position: fixed;
			left: 20upx;
			display: flex;
			justify-content: center;
			align-items: flex-end;
		}


	}

	.herderImgC {
		// margin-top: 10rpx;
		height: 100%;
		width: 100%;
		position: relative;

		image {
			border-radius: 10rpx;
			width: 100%;
			height: 100%;
		}

		.title {

			// font-size: 20px;
			text-align: center;
			/* padding-top: 28px; */
			position: absolute;
			top: 2.55rem;
			z-index: 1;
			left: 10px;
			color: aliceblue;
			display: flex;
		}
	}

	.fild-body {
		// border: 1px solid red;
		width: 96%;
		height: 260px;
		margin-top: -15vh;
		position: relative;
		left: 2%;
		background-color: #fdfdff;
		border-radius: 10rpx;
		text-align: center;
	}

	.submit {
		width: 100%;
		// height: 18vh;
		background: linear-gradient(to top, #ffffff, #feecdfed);
		/* 浅蓝色渐变 */
		border-radius: 10rpx;
		margin-top: 1rem;

		.step {
			box-sizing: border-box;
			border-radius: 8px;
			width: 96%;
			height: 17vh;
			margin-left: 2%;
		}

		.alltop {
			margin-bottom: 20px;
		}

		.step-title-box {
			padding-top: 1.5rem;
			color: #333;
		}

		.step-title {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.step-title-img {
			background-position: 0% 0%;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 20vw;
			height: 1vh;
		}

		.step-title-text {
			font-size: 15px;
			font-weight: 600;
			padding: 0 8px;
		}

		.step-box {
			display: flex;
			justify-content: space-evenly;
		}

		.step-item {
			text-align: center;
		}

		.arrowhead {
			width: 4vh;
			height: 4vh;
			background-position: 0% 0%;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: inline-block;
			overflow: hidden;
			position: relative;
		}
	}

	.subimt-but {
		width: 88%;
		height: 45px;
		line-height: 45px;
		background-color: #4b57fd;
	}

	//      .herderImg {
	//          padding: 20rpx;
	//          display: flex;
	//          height: 460rpx;
	// margin-top: 10rpx;

	//      }

	.hint {
		width: 100%;
		background-color: #b2d7ff;
		height: 80rpx;
		margin-top: 20rpx;
	}

	p {
		font-size: 50rpx;
		color: #ffffff;
		letter-spacing: 8rpx;
		margin-left: 48rpx;
		margin-top: 50rpx;
	}
}

.centerline {
	width: 720rpx;
	padding-bottom: 60rpx;
	// height: 578rpx;
	background-color: #ffffff;
	box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(52, 51, 51, 0.22);
	border-radius: 20rpx;
	margin: -130rpx auto;

	.p {
		margin-top: 30rpx;
		color: #000000;
		font-weight: bold;
		font-size: 44rpx;
	}

	.p1 {
		margin-top: 30rpx;
		font-size: 28rpx;
		color: #9d9d9d;
	}

	.p2 {
		margin-top: 20rpx;
		color: #000000;
		font-weight: bold;
		font-size: 60rpx;
	}

	.p3 {
		margin-top: 20rpx;
		color: #fcb60c;
		font-size: 28rpx;
	}
}

.btn {
	width: 100%;
	margin-top: 30rpx;

	.btns {
		width: 172rpx;
		height: 51rpx;
		background-color: #eeeeee;
		border-radius: 10rpx;
		line-height: 51rpx;
		color: #7c7c7c;
		font-size: 24rpx;
		text-align: center;
	}
}

.custom-style {
	width: 578rpx;
	height: 73rpx;
	background-image: linear-gradient(93deg,
			#57a8ff 0%,
			#4ba2ff 100%);
	box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(52, 51, 51, 0.22);
	border-radius: 37rpx;
	color: #ffffff;
	font-size: 30rpx;
	line-height: 73rpx;
	text-align: center;
	margin-top: 20rpx;
}

.step-bottom {
	// position: absolute;
	top: 56vh;
	margin: 1.2vh;
	padding: 24px 0;
	background: #fff;
	border-radius: 8px;
	padding: 24px 35px;
	width: 95%;
	// height: 39vh;
	box-sizing: border-box;
	border: 1px solid #e8e6e6;
}

.step-bottom-title {
	display: flex;
	align-items: center;
	justify-content: center;
}

.step-bottom-img {
	width: 47px;
	height: 5px;
	background-position: 0% 0%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.account-box {
	flex-wrap: wrap;
	text-align: center;
	display: flex;
	justify-content: space-between;
}

.account {
	width: 50%;
	margin-top: 20px;
}

.account .item-txt {
	width: 40vw;
}

.account-img {
	width: 40px !important;
	height: 40px !important;
	display: inline-block;
	overflow: hidden;
	position: relative;

	background-position: 0% 0%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
</style>
